var winW, winH;
// var bluroff = false;
var adfri = true;
var vdSupp = true;
$(function(){
	winW = document.documentElement.clientWidth || document.body.clientWidth;
	winH = document.documentElement.clientHeight || document.body.clientHeight;
	document.body.style.width = winW + "px";
	document.body.style.height = winH + "px";

});


$(function(){
	var curCount = 0,
		startY = 0,
		endY = 0,
		dTime = 500,
		norZidx = "10",
		curZidx = "20",
		totZidx = "30",
		isMove = false,
		isUp = false,
		isDown = false;
	var illi = $(".touch-wrap .m-page");
	var totCount = illi.length;

	$(document).bind("touchstart", function(e){
		// if (!bluroff) {
		// 	return;
		// }
		
		e.stopPropagation();
		//e.preventDefault();
		startY = endY = parseInt(e.touches[0].clientY);
		illi.css({"z-index" : norZidx, "visibility" : "hidden"});
		$(illi.get(curCount)).css({"z-index" : curZidx,"visibility" : "visible"});
		if (curCount == 0) {
			$(illi.get(curCount + 1)).css({
				"z-index" : totZidx,
				"visibility" : "visible",
				"-webkit-transition-duration" : "0ms",
				"-webkit-transform" : "translate3d(0," + winH + "px,0)",
				"-moz-transition-duration" : "0ms",
				"-moz-transform" : "translate3d(0," + winH + "px,0)",
				"-ms-transition-duration" : "0ms",
				"-ms-transform" : "translate3d(0," + winH + "px,0)",
				"-o-transition-duration" : "0ms",
				"-o-transform" : "translate3d(0," + winH + "px,0)",
				"transition-duration" : "0ms",
				"transform" : "translate3d(0," + winH + "px,0)",
				
			});
		}else if (curCount == totCount - 1) {
			$(illi.get(curCount - 1)).css({
				"z-index" : totZidx,
				"visibility" : "visible",
				"-webkit-transition-duration" : "0ms",
				"-webkit-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-moz-transition-duration" : "0ms",
				"-moz-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-ms-transition-duration" : "0ms",
				"-ms-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-o-transition-duration" : "0ms",
				"-o-transform" : "translate3d(0," + (-winH) + "px,0)",
				"transition-duration" : "0ms",
				"transform" : "translate3d(0," + (-winH) + "px,0)",
			
			});
		} else if (curCount > 0 && curCount < totCount - 1) {
			$(illi.get(curCount + 1)).css({
				"z-index" : totZidx,
				"visibility" : "visible",
				"-webkit-transition-duration" : "0ms",
				"-webkit-transform" : "translate3d(0," + winH + "px,0)",
				"-moz-transition-duration" : "0ms",
				"-moz-transform" : "translate3d(0," + winH + "px,0)",
				"-ms-transition-duration" : "0ms",
				"-ms-transform" : "translate3d(0," + winH + "px,0)",
				"-o-transition-duration" : "0ms",
				"-o-transform" : "translate3d(0," + winH + "px,0)",
				"transition-duration" : "0ms",
				"transform" : "translate3d(0," + winH + "px,0)"
			});
			$(illi.get(curCount - 1)).css({
				"z-index" : totZidx,
				"visibility" : "visible",
				"-webkit-transition-duration" : "0ms",
				"-webkit-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-moz-transition-duration" : "0ms",
				"-moz-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-ms-transition-duration" : "0ms",
				"-ms-transform" : "translate3d(0," + (-winH) + "px,0)",
				"-o-transition-duration" : "0ms",
				"-o-transform" : "translate3d(0," + (-winH) + "px,0)",
				"transition-duration" : "0ms",
				"transform" : "translate3d(0," + (-winH) + "px,0)"
			});
		}
	});

	$(document).bind("touchmove", function(e){
		// if (!bluroff) {
		// 	return;
		// }
		
		e.stopPropagation();
		e.preventDefault();
		endY = parseInt(e.touches[0].clientY);
		var diffY = parseInt(endY - startY);
		if (curCount == 0) {
			if (diffY < -10) {
				if (!isDown) {
					isUp = true;
					$(illi.get(curCount + 1)).css({
						"-webkit-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-moz-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-ms-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-o-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"transform" : "translate3d(0," + (winH + diffY) + "px,0)"
		 			});
				}
			}
		} else if (curCount == totCount - 1) {
			if (diffY > 10) {
 				if (!isUp) {
					isDown = true;
					$(illi.get(curCount - 1)).css({
						"-webkit-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-moz-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-ms-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-o-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"transform" : "translate3d(0," + (-winH + diffY) + "px,0)"
		 			});
		 		}
		 	}
		} else if (curCount > 0 && curCount < totCount - 1) {
			if (diffY < -10) {
				if (!isDown) {
					isUp = true;
					if (winH + diffY == 0) {return;}
					$(illi.get(curCount + 1)).css({
						"-webkit-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-moz-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-ms-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"-o-transform" : "translate3d(0," + (winH + diffY) + "px,0)",
						"transform" : "translate3d(0," + (winH + diffY) + "px,0)"
		 			});	
				}
			} else if (diffY > 10) {
				if (!isUp) {
					isDown = true;
					$(illi.get(curCount - 1)).css({
						"-webkit-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-moz-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-ms-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"-o-transform" : "translate3d(0," + (-winH + diffY) + "px,0)",
						"transform" : "translate3d(0," + (-winH + diffY) + "px,0)"
		 			});
		 		}
			}
		}
	});

	$(document).bind("touchend", function(e){
		// if (!bluroff) {
		// 	return;
		// }
		
		e.stopPropagation();
		var translateY = 0;
		if (isUp) {
			var next = $(illi.get(curCount + 1));
			translateY = parseInt(next.css("-webkit-transform").split(/[(]|[,]|[)]/)[2]);
			if (Math.abs(translateY / winH) < 0.9) {
				next.css({
					"-webkit-transition-duration" : dTime + "ms",
					"-webkit-transform" : "translate3d(0," + 0 + "px,0)",
					"-moz-transition-duration" : dTime + "ms",
					"-moz-transform" : "translate3d(0," + 0 + "px,0)",
					"-ms-transition-duration" : dTime + "ms",
					"-ms-transform" : "translate3d(0," + 0 + "px,0)",
					"-o-transition-duration" : dTime + "ms",
					"-o-transform" : "translate3d(0," + 0 + "px,0)",
					"transition-duration" : dTime + "ms",
					"transform" : "translate3d(0," + 0 + "px,0)"
	 			});
	 			curCount++;
 			} else {
 				next.css({
					"-webkit-transition-duration" : dTime + "ms",
					"-webkit-transform" : "translate3d(0," + winH + "px,0)",
					"-moz-transition-duration" : dTime + "ms",
					"-moz-transform" : "translate3d(0," + winH + "px,0)",
					"-ms-transition-duration" : dTime + "ms",
					"-ms-transform" : "translate3d(0," + winH + "px,0)",
					"-o-transition-duration" : dTime + "ms",
					"-o-transform" : "translate3d(0," + winH + "px,0)",
					"transition-duration" : dTime + "ms",
					"transform" : "translate3d(0," + winH + "px,0)"
	 			});
 			}
 			isUp = false;
	 		isDown = false;
		}
		if (isDown) {
			var prev = $(illi.get(curCount - 1));
			translateY = parseInt(prev.css("-webkit-transform").split(/[(]|[,]|[)]/)[2]);
 			if (Math.abs(translateY / winH) < 0.9) {
				prev.css({
					"-webkit-transition-duration" : dTime + "ms",
					"-webkit-transform" : "translate3d(0," + 0 + "px,0)",
					"-moz-transition-duration" : dTime + "ms",
					"-moz-transform" : "translate3d(0," + 0 + "px,0)",
					"-ms-transition-duration" : dTime + "ms",
					"-ms-transform" : "translate3d(0," + 0 + "px,0)",
					"-o-transition-duration" : dTime + "ms",
					"-o-transform" : "translate3d(0," + 0 + "px,0)",
					"transition-duration" : dTime + "ms",
					"transform" : "translate3d(0," + 0 + "px,0)"
	 			});
	 			curCount--;
 			} else {
 				prev.css({
					"-webkit-transition-duration" : dTime + "ms",
					"-webkit-transform" : "translate3d(0," + (-winH) + "px,0)",
					"-moz-transition-duration" : dTime + "ms",
					"-moz-transform" : "translate3d(0," + (-winH) + "px,0)",
					"-ms-transition-duration" : dTime + "ms",
					"-ms-transform" : "translate3d(0," + (-winH) + "px,0)",
					"-o-transition-duration" : dTime + "ms",
					"-o-transform" : "translate3d(0," + (-winH) + "px,0)",
					"transition-duration" : dTime + "ms",
					"transform" : "translate3d(0," + (-winH) + "px,0)"
	 			});
 			}
 			isUp = false;
 			isDown = false;
		}
		 if (curCount == 0) {
		 	$(".pageup").show();
		 	$(".pagedown").hide();
		 } else if (curCount == totCount - 1) {
		 	$(".pageup").hide();
		 	$(".pagedown").show();
		 } 
		  else if (curCount > 0 && curCount < totCount - 1) {
		 	$(".pageup").show();
		 	$(".pagedown").show();
		}
	});

	$(".musicplay").bind("touchstart", function(e){
		e.stopPropagation();
		var _this = $(this);
		try{
			var oMusic = $(".music").get(0);
		}catch(e){  
		    alert('抱歉，您的设备不支持audio！');
		    return;
		}
		if (oMusic.paused) {
			if (_this.hasClass("musicplay")) {
				_this.removeClass("musicplay").addClass("musicpause");
			} else {
				oMusic.play();
				_this.removeClass("musicpause").addClass("musicplay");
			}
		} else {
			oMusic.pause();
			_this.removeClass("musicplay").addClass("musicpause");
		}
	});
	
	
	var transend ="webkitTransitionEnd MSTransitionEnd oTransitionEnd TransitionEnd";
	
	document.readyState; 
	document.onreadystatechange = subSomething; 
	function subSomething(){
	if(document.readyState=="complete"){
		    $(".touch-wrap").css("display","block");
			$(".musicplay").css("display","block");
			$(".pageup").css("display","block");
			setTimeout(function(){
				$(".item01").find(".tit01").addClass("tran01");
				$(".item01").find(".tit02").addClass("tran02");
			},0);
	}};
	
	
});
$(function(){
	 function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$('can');
        var cans = can.getContext('2d');
        var objImg = new Image();
		
		var w2 = w * 20+"%";
        objImg.src = '123.jpg';
        objImg.onload = function (){
            cans.drawImage(objImg,0,0,800,600);
        }
        cans.beginPath();
        cans.rect(0,0,w2,h);
        cans.closePath();
        cans.clip();
    }
    function img_click(){
        var can = $$('can');
        var cans = can.getContext('2d');
        cans.clearRect(0,0,800,600);
    }
	
});	

